* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  position: relative;

  .searcho {
    z-index: 999;
    width: 76%;
    height: 10%;
    border-radius: 20px;
    background-color: white;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 3px 2px 10px #666666;


    .seacontent {
      height: 100%;
      padding: 1%;
      display: flex;
      justify-content: space-between;

      .seainput {
        width: 88%;
        height: 100%;
        border: none;
        font-size: 1rem;
      }

      .seabut {
        width: 12%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #5C7BDA;
        border: none;
        cursor: pointer;

        .seabutimg {
          max-width: 20%;
        }

        .seatit {
          font-size: 1rem;

          & a {
            color: white;
            text-decoration: none;
          }
        }
      }
    }
  }
}

.reco {
  // 搜索发现
  .titlebox {
    text-align: center;
    width: 100%;

    .title-tit {
      font-size: 2.5rem;
      transition: text-shadow 0.3s ease;
    }

    .title-tit:hover {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .title-p {
      color: #666666;
      font-size: 2rem;
      transition: text-shadow 0.3s ease;
    }

    .title-p:hover {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  }

  .activeo {
    width: 80%;
    margin: auto;
    margin-top: 10%;

    .actbutbox {
      width: 80%;
      margin: auto;
      margin-top: 3vh;
      display: flex;
      justify-content: space-between;

      // 选项卡切换
      .rollbut {
        width: 12%;
        padding: 1vh 2vh;
        border-radius: 30px;
        border: solid 2px #1A42BB;
        background-color: white;
        color: #1A42BB;
      }

      .rollbut:hover {
        background-color: #1A42BB;
        color: white;
      }

      // 选项卡切换
    }

    .rolltab {
      .overseas {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .osson {
          width: 49%;
          height: 404px;
          margin-top: 5%;
          border-radius: 20px;
          display: flex;
          justify-content: space-between;
          background-color: #F1F1F1;
          overflow: hidden;

          /* 隐藏溢出部分 */
          .ossonleft {
            width: 48%;
            height: 100%;
            overflow: hidden;

            /* 隐藏溢出部分 */
            & img {
              max-width: 100%;
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all 1.5s;
            }

          }

          .ossonleft:hover img {
            transform: scale(1.2);
          }

          .ossonright {
            width: 48%;
            padding: 4% 4% 4% 0;
            box-sizing: border-box;
            transition: transform 0.3s ease;
            /* 添加过渡效果 */
            .osrp {
              font-size: 1.8em;
            }

            .osrtext {
              font-size: 1.2em;
              color: #939393;
              margin-top: 7%;
              margin-bottom: 19%;
            }

            .osrtetail {
              color: #FC9919;
              display: flex;
              justify-content: right;
              transform: translateX(28%);
              /* 初始位置 */
              transition: transform 0.3s ease;

              /* 添加过渡效果 */
              & a {
                text-decoration: none;
                color: #FC9919;
              }
            }
          }

          .ossonright:hover .osrtetail {
            transform: translateX(-6%);
          }
        }
      }
    }
  }

  // 搜索发现
  // 热门活动
  .hotbox {
    width: 80%;
    margin: auto;
    margin-top: 5%;

    .hotbody {
      width: 96%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;

      .hotimg {
        width: 49%;
        height: 500px;
        margin-top: 4%;
        text-align: center;
        overflow: hidden;

        & img {
          max-width: 100%;
          max-height: 100%;
          width: 100%;
          height: 100%;
          transition: all 1.5s;
          object-fit: cover;
        }
      }

      .hotimg:hover img {
        transform: scale(1.2);
      }

      .hotcenter {
        width: 24%;
        height: 30%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: solid 1px #989898;
        transition: box-shadow 0.3s ease;
        /* 添加过渡效果 */
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        & p {
          font-size: 2em;
          transition: all 1.5s;
        }
      }

      .hotcenter:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 1);

        /* 在鼠标悬停时添加阴影 */
        & p {
          transform: scale(1.2);
        }
      }
    }

    .hotto {
      text-align: center;
      width: 100%;
      margin-top: 4%;

      .hotbut {
        margin: auto;
        text-align: center;
        background-color: #1A42BB;
        font-size: 1.6em;
        padding: 0.5% 1.5%;
        border: none;
        border-radius: 40px;

        & a {
          color: white;
          text-decoration: none;
        }
      }
    }
  }

  // 热门活动
  // 营地榜单
  .camplist {
    width: 80%;
    margin: auto;
    margin-top: 5%;

    .listbody {
      width: 94%;
      margin: auto;
      margin-top: 3%;
      border: solid 1px #ECECEC;
      border-radius: 40px;
      display: flex;

      .listleft {
        width: 40%;
        overflow: hidden;

        & img {
          max-width: 100%;
          transition: all 1.5s;
        }
      }

      .listleft:hover img {
        transform: scale(1.2);
      }

      .listright {
        width: 59%;
        padding: 2% 2%;
        box-sizing: border-box;

        .lrp {
          font-size: 2em;
          display: flex;
          align-items: center;
          margin-top: 3.6%;

          .lrpnum {
            padding: 1% 2%;
            display: inline-block;
            border-radius: 50%;
            background-color: #1B7B34;
            color: white;
          }

          .lrpnum2 {
            padding: 1% 2%;
            display: inline-block;
            border-radius: 50%;
            background-color: #1EA4E9;
            color: white;
          }

          .lrpnum3 {
            padding: 1% 2%;
            display: inline-block;
            border-radius: 50%;
            background-color: #E9AE1E;
            color: white;
          }

          .lrpnum4 {
            padding: 1% 2%;
            display: inline-block;
            border-radius: 50%;
            background-color: #00A87C;
            color: white;
          }

          .lrptext {
            color: #1B7B34;
            margin-left: 6%;
            transition: text-shadow 0.3s ease;
          }

          .lrptext:hover {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
          }
        }

      }
    }
  }

  // 营地榜单
  // 寻找营地
  .find {
    margin-top: 8%;
    width: 100%;
    background-color: #EBC462;
    padding: 3% 4%;
    box-sizing: border-box;
    display: flex;

    .findleft {
      width: 30%;
      text-align: center;

      & img {
        max-width: 50%;
      }

      .findtit {
        font-size: 3em;
        color: #1B8145;
        font-weight: bold;
      }
    }

    .findright {
      width: 68%;

      .frtop {
        margin-top: 2%;
        color: black;
        font-size: 2.6em;

        & p {
          transition: text-shadow 0.3s ease;
        }

        & p:hover {
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
        }

        .frtopp {
          margin-left: 10%;
          margin-top: 4%;
        }
      }

      .frbot {
        display: flex;
        justify-content: right;
        margin-top: 6%;
        overflow: hidden;

        & img {
          max-width: 100%;
          transition: all 1.5s;
        }

        & img:hover {
          transform: scale(0.8);
        }
      }
    }
  }

  // 寻找营地
}

// 响应769px
@media screen and (max-width:769px) {
  .header .searcho .seacontent .seabut .seatit {
    font-size: 0.5rem;
  }

  .reco {
    .titlebox {

      .title-tit {
        font-size: 1.5rem;
      }

      .title-p {
        font-size: 1rem;
      }
    }

    // 搜索发现
    .activeo {
      width: 94%;

      .actbutbox {
        width: 100%;

        .rollbut {
          width: 30%;
          padding: 0;
          font-size: 0.1rem;
        }
      }

      .rolltab {
        .overseas {
          display: block;

          .osson:nth-child(n+4) {
            display: none;
          }

          .osson {
            width: 100%;
            border-radius: 4px;

            .ossonleft {
              width: 35%;
            }

            .ossonright {
              width: 62%;
              padding: 1% 2% 1% 0;

              .osrp {
                font-size: 0.8em;
                text-align: center;
              }

              .osrtext {
                font-size: 0.2em;
                margin: 3% 0;
              }

              .osrtetail {
                transform: translateX(60%);
                font-size: 0.1em;
              }
            }
          }
        }
      }
    }

    // 搜索发现
    // 热门活动
    .hotbox {
      width: 96%;
      .hotbody {
        .hotcenter {
          & p {
            font-size: 8px;
          }
        }
      }
      .hotto{
        .hotbut{
          & a{
            font-size: 10px;
          }
        }
      }
    }
    // 热门活动
    // 营地榜单
    .camplist{
      width: 100%;
      .listbody{
        border-radius: 8px;
        .listright{
          .lrp{
            font-size: 0.5em;
            margin-top: 2.6%;
          }
        }
      }
    }
    // 营地榜单
    // 寻找营地
    .find{
      padding: 3% 2%;
      .findleft{
        .findtit{
          font-size: 1.5em;
        }
      }
      .findright{
        .frtop{
          font-size: 1.2em;
        }
      }
    }
    // 寻找营地
  }
}
